<template>
  <view class="city-choose-wrapper">
    <u-navbar
      class="custom-navbar"
      title="选择城市"
      :title-bold="false"
    ></u-navbar>
    <div class="search-wrapper">
      <div class="placeholder"></div>
      <div class="search-outer">
        <search @search="onSearch" />
      </div>
    </div>
    <u-index-list
      class="custom-index-list"
      :scrollTop="scrollTop"
      :index-list="indexList"
      active-color="#FF874FFF"
      :wrapper-offset-top="offsetTop"
      :sticky="false"
      v-if="indexList.length > 0"
    >
      <view v-for="(indexItem, index) in indexCityList" :key="index">
        <u-index-anchor
          :use-slot="true"
          :index="indexList[index]"
          :customStyle="{ padding: 0 }"
        >
          <view class="anchor-text">
            <view class="anchor-point"></view>
            <text>{{ indexList[index] }}</text>
          </view>
        </u-index-anchor>
        <view
          class="city-item"
          v-for="(cityItem, cityIndex) in indexItem"
          :key="cityIndex"
          @click="cityClickFn(cityItem)"
        >
          <text>{{ cityItem.name }}</text>
          <u-line color="#F9FBFC" />
        </view>
      </view>
    </u-index-list>
    <empty v-else />
  </view>
</template>

<script>
import { getCityList } from "@/api/qccx.js";
import search from "../components/search.vue";
import empty from "../components/empty.vue";
import { debounce } from "../utils/index.js";
export default {
  data() {
    return {
      // 索引列表
      indexList: [],
      // 索引城市列表
      indexCityList: [],
      scrollTop: 0,
      offsetTop: 0,
    };
  },
  components: {
    search,
    empty,
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    cityClickFn(cityItem) {
      uni.$emit("cityChoose", cityItem);
      uni.navigateBack();
    },
    generateIndexList(keyword) {
      getCityList({ name: keyword }).then((res) => {
        const cityList = res.result;
        const tempArr = [];
        cityList.forEach((item) => {
          const firstLetter = item.firstLetter;
          let target = tempArr.find((item) => item.firstLetter === firstLetter);
          if (!target) {
            tempArr.push({
              firstLetter,
              list: [],
            });
            target = tempArr[tempArr.length - 1];
          }
          target.list.push({ name: item.name, code: item.code });
        });
        // 按首字母排序
        tempArr.sort((a, b) => {
          return a.firstLetter.charCodeAt(0) - b.firstLetter.charCodeAt(0);
        });
        // 生成字母索引
        let tempIndexList = tempArr.map((item) => item.firstLetter);
        this.indexList = tempIndexList;
        // 生成城市数据
        let tempIndexCityList = tempArr.map((item) => item.list);
        this.indexCityList = tempIndexCityList;

        if (!this.offsetTop) {
          this.$nextTick(() => {
            this.getOffsetTop();
          });
        }
      });
    },
    getOffsetTop() {
      uni
        .createSelectorQuery()
        .in(this)
        .select(".custom-index-list")
        .boundingClientRect((rect) => {
          this.offsetTop = rect.top;
        })
        .exec();
    },
    onSearch(val) {
      this.generateIndexList(val);
    },
  },
  created() {
    // 生成索引列表
    this.generateIndexList();
    // onSearch 函数节流
    this.onSearch = debounce(this.onSearch, 300);
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.city-choose-wrapper {
  min-height: 100vh;
  background-color: #ffffff;
  .anchor-text {
    height: 44rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #1f2334;
    line-height: 44rpx;
    display: flex;
    align-items: center;
    padding-left: 48rpx;
    position: relative;
    background-color: #fff;
    .anchor-point {
      width: 8rpx;
      height: 8rpx;
      background: #d5a986ff;
      border-radius: 2rpx 2rpx 2rpx 2rpx;
      margin-right: 12rpx;
      position: absolute;
      left: 28rpx;
    }
  }
}
.search-wrapper {
  box-sizing: border-box;
  background-color: #fff;
  .placeholder {
    height: 128rpx;
  }
  .search-outer {
    position: fixed;
    padding: 24rpx 28rpx;
    top: 44px;
    width: calc(100% - 48rpx);
    background-color: #fff;
    z-index: 990;
    .search-container {
      background-color: #f1f2f4ff;
    }
  }
}
.city-item {
  height: 100rpx;
  line-height: 100rpx;
  background: #ffffff;
  padding: 0 48rpx;
}
</style>
